<template>
    <viewer :images="photo" v-if="loading">
        <img v-for="(src, index) in photo" :src="src" :key="index" :height="height">
    </viewer>
</template>

<script>
export default {
    name: 'GenecloudUiIndex',
    props: {
        url: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            photo: [],
            errorImg: '',
            height: '',
            loading:false
        };
    },
    created() {
        // 默认触发一次resize事件
        setTimeout(() => {
            const event = document.createEvent('HTMLEvents');
            event.initEvent('resize', true, true);
            event.eventType = 'message'
            window.dispatchEvent(event);
            this.loading = true
        }, 100)
        window.addEventListener('resize', this.changeViewerHeight)
        this.photo = [this.url]
    },
    mounted() {

    },
    beforeDestroy () {
        window.removeEventListener('resize',this.changeViewerHeight)
    },
    methods: {
        changeViewerHeight() {
            this.height = (document.body.clientHeight - 300) + 'px'
        }
    },
};
</script>

<style lang="scss" scoped></style>